<template>
  <div>
    <div id="box">
      <input type="text" name="" id="" v-model="content" @keyup="get($event)" @keydown.down="changeDown()"
        @keydown.up="changeUp()" @input="showUL" :style = "getSwidth" style="font-size: 15px;"/>
        <input type="submit" @click="search" class="ok" value="搜索一下" :style = "getOwidth" />
        <ul v-if ="show == 1" :style = "getSwidth" style = "font-size: 15px; background-color: white;">
          <!-- 这里注意给class添加属性的时候采用的是{属性:true/false}的形式 -->
            <li v-for="(item, index) in myData" :class="{grey: index == now}">
              {{item}}
            </li>
        </ul>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      swidth: {
        type: Number,
        default: 0
      },
      owidth:{
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        myData: [],
        content: '',
        now: -1,
        show: 0
      }
    },
    methods: {
      get: function (ev) {
        // 这里的键码只能通过事件对象$event传进来，因为输入大多数键都应该可以进行搜素，我们要排除的就是up(38)和down(40)
        if (ev.keyCode == 38 || ev.keyCode == 40) {
          return;
        }
        // 这里当按下的键是Enter时，应实现搜索跳转功能
        if (ev.keyCode == 13) {
          window.open('https://www.baidu.com/s?wd=' + this.content);
          this.content = '';
        }
        this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + this.content, {
          jsonp: 'cb'
        }).then(function (res) {
          this.myData = res.data.s;
        })
      },
      changeDown: function () {
        this.now++;
        if (this.now == this.myData.length) {
          this.now = -1;
        }
        // 这里实现输入框中也显示同样的内容
        this.content = this.myData[this.now];
      },
      changeUp: function () {
        this.now--;
        if (this.now == -2) {
          this.now = this.myData.length;
        }
        this.content = this.myData[this.now];
      },
      showUL(){
        this.show = 1
      },
      search(){
        window.open('https://www.baidu.com/s?wd=' + this.content);
      }
    },
    computed: {
      getSwidth(){
        console.log(`${this.swidth}px`)
        return `width :${this.swidth}px`;
      },
      getOwidth(){
        console.log(`${this.owidth}px`)
        return `width :${this.owidth}px`;
      }
    }
  }

</script>

<style scoped>

  *{margin:0;padding:0;}

  input {
    padding-left: 15px;
    /** width: 539px;  如果太宽此处可改宽度 */
    height: 35px;
    border: 2px solid dodgerblue;
    outline:none;
    border-radius: 5px;
  }
  ul{
    padding-left: 15px;
    position: relative;
    /**width: 539px;   如果太宽此处可改宽度 */
    list-style: none;
    border-top: 2px solid dodgerblue;
    border-left: 2px solid dodgerblue;
    border-right: 2px solid dodgerblue;
    border-bottom: 2px solid dodgerblue;
    border-radius: 5px;
    height: 285px;
  }

  li{
    padding:0;
    margin:0;
    color: gray;
    height: 25px;
    margin-left: 0px;

  }
  .ok{
    margin-left: 0px;
    height: 36px; 
    color: white;
    background: #317ef3;
    border: 0;
    font-size:medium;
    padding:0;
  }
</style>
